<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button v-on:click="editHandle">@Emit</button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue,Emit } from 'vue-property-decorator';
import myMixins from './mixins';

@Component({
  //混入
  mixins: [myMixins]
})
export default class HelloWorld extends Vue {
  // 父组件传递的参数
  //这里 !和可选参数?是相反的, !告诉TypeScript我这里一定有值
  @Prop() private msg!: string;

  // 定义的变量
  count: number = 0;
  
  // Emit方法
  @Emit("editHandleEmit")
  private editHandle() {
    return this.count;
  }

  // 生命周期
  created() {
    console.log(this.value,"HelloWorld中的created钩子")
  }
}
</script>

<!-- scoped 表示 样式仅仅在当前页面使用 -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
